<template>
  <div id="myCode">
    <Header :showheaderLeft="false" :showBack="true" :isTitle="true" :showTitle="true"></Header>
    <div class="rootMain">
      <div class="top">
        <!-- <img src="@/assets/img/mine/wx.png" alt /> -->
        <img src="@/assets/img/fuze/code.png" alt />
        <p>{{$t('m.qrDownload')}}</p>
      </div>
      <div class="btn btn-lg" @click="copyShaneUrl">{{$t('m.downloadL')}}</div>
      <p
        style="text-align:center;margin-top:20px; color:#ccc;"
        @click="$router.push(`/download`)"
      >立即下载</p>
      <input type="text" :value="link" id="copyUrl" v-show="false" />
    </div>
  </div>
</template>
<script>
import Services from "@/service/index.js";
import { mapMutations, mapState } from "vuex";
import Header from "@/components/header";
import { Dialog, Toast } from "vant";
export default {
  data() {
    return {
      link: ""
    };
  },
  created() {
    this.changeTitle(this.$t("m.download"));
    this.link = window.location.origin+'/#/download';
  },
  components: { Header },
  computed: {},
  mounted() {},
  methods: {
    ...mapMutations(["changeTitle", "changetabbarIndex"]),
    downAPP() {
      var browser = {
        versions: (function() {
          var u = navigator.userAgent,
            app = navigator.appVersion;
          return {
            //移动终端浏览器版本信息
            trident: u.indexOf("Trident") > -1, //IE内核
            presto: u.indexOf("Presto") > -1, //opera内核
            webKit: u.indexOf("AppleWebKit") > -1, //苹果、谷歌内核
            gecko: u.indexOf("Gecko") > -1 && u.indexOf("KHTML") == -1, //火狐内核
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
            android: u.indexOf("Android") > -1 || u.indexOf("Linux") > -1, //android终端或uc浏览器
            iPhone: u.indexOf("iPhone") > -1, //是否为iPhone或者QQHD浏览器
            iPad: u.indexOf("iPad") > -1, //是否iPad
            webApp: u.indexOf("Safari") == -1 //是否web应该程序，没有头部与底部
          };
        })()
      };
      if (browser.versions.mobile) {
        //判断是否是移动设备打开
        var ua = navigator.userAgent.toLowerCase(); //获取判断用的对象
        if (browser.versions.ios) {
          window.location = window.location.origin + "/#/download";
        } else if (browser.versions.android) {
          window.location =
            window.location.origin + "/download/android/fuze.apk";
        }
      }
    },
    copy(id, attr) {
      let target = null;
      if (attr) {
        target = document.createElement("div");
        target.id = "tempTarget";
        target.style.opacity = "0";
        if (id) {
          let curNode = document.querySelector("#" + id);
          target.innerText = curNode[attr];
        } else {
          target.innerText = attr;
        }
        document.body.appendChild(target);
      } else {
        target = document.querySelector("#" + id);
      }
      try {
        let range = document.createRange();
        range.selectNode(target);
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
        document.execCommand("copy");
        window.getSelection().removeAllRanges();
        Toast(this.$t("m.successfulCopy"));
      } catch (e) {
        Toast(this.$t("m.replicationFailed"));
      }
      if (attr) {
        target.parentElement.removeChild(target);
      }
    },
    copyShaneUrl() {
      this.copy("copyUrl", "value");
    }
  }
};
</script>
<style lang="scss" scoped type="text/scss">
#myCode {
  .rootMain {
    top: 0.88rem;
    height: calc(100% - 0.88rem);
    // background: ;
    .top {
      padding: 2rem 0;
      text-align: center;
      img {
        width: 4rem;
        height: 4rem;
        margin-bottom: 0.4rem;
      }
      p {
        font-weight: 600;
        font-size: 0.3rem;
      }
    }
  }
}
</style>